<template>
  <div class="study-box">
    <el-button type="primary" @click="fooChange">foo control</el-button>
    <div>
      <el-switch
        v-model="switchFlag"
        active-text="按月付费"
        inactive-text="按年付费">
      </el-switch>
    </div>
    <div>{{ UserModule.getFoo }}</div>
    <div class="token">{{ UserModule.userInfo.token }}</div>
    <StudyComp :msg="msg" @getName="getName" />
  </div>
</template>

<script lang="ts">
/**
 * 在 vue 中使用 typescript 非常好用的几个库:
 *  vue-class-component: 
 *    vue-class-component是一个 Class Decorator,也就是类的装饰器
 *  vue-property-decorator:
 *    vue-property-decorator是基于 vue 组织里 vue-class-component所做的拓展
 *  vuex-module-decorators：
 *    用 typescript 写 vuex 很好用的一个库
*/
// import { Vue, Component, Inject, Provide, Prop, Model, Watch, Emit, Mixins } from 'vue-property-decorator'
// import { Module, VuexModule, Mutation, Action, MutationAction, getModule } from 'vuex-module-decorators'
import { Component, Vue } from 'vue-property-decorator';
import StudyComp from '@/components/pc/StudyComp.vue';
import MyMixin from '@/mixin/pc/mixin1'
import { UserModule } from '@/store/pc/user'

interface ListItem {
  id: ''
  name: ''
}

@Component({
  components: {
    StudyComp
  },
  mixins: [MyMixin]
})
export default class Home extends Vue {
  public UserModule = UserModule; // store引入

  public msg = "";
  public timer = 0;
  public switchFlag = false
  public list = []

  public created() {
    console.log(this.commonInfo) // 针对mixins特殊处理
    this.list.forEach((item: ListItem) => {
      console.log(item.id)
    })
    this.timer= setTimeout(() => {
      this.msg = 'Vue.js + TypeScript App'
    }, 1000)
  }

  public fooChange(): void {
    this.UserModule.changeFoo('foo test')
  }

  public getName(info: any): void {
    console.log(info)
  }
}
</script>
